<template>
  <div
    v-if="isShow"
    class="auto-refresh-setting"
  >
    <VsFormItem :label="$demoi18n('panelData.autoRefresh')">
      <el-switch v-model="form.autoRefresh.switchEnable"></el-switch>
    </VsFormItem>
    <VsFormItem
      v-show="form.autoRefresh.switchEnable"
      :label="$demoi18n('autoRefresh.actType')"
      tip-key="autoRefresh.refreshActType"
    >
      <div>
        <el-radio
          v-model="form.autoRefresh.actType"
          :disabled="!can('push')"
          label="push"
        >{{ $demoi18n('autoRefresh.label.pushType') }}</el-radio>
        <el-radio
          v-model="form.autoRefresh.actType"
          :disabled="!can('pull')"
          label="pull"
        >{{ $demoi18n('autoRefresh.label.pullType') }}</el-radio>
      </div>
    </VsFormItem>
    <AutoRefreshPushTypeSetting
      v-if="form.autoRefresh.switchEnable && form.autoRefresh.actType === 'push'"
      :form="form"
      :config="config"
    />
    <VsFormItem
      v-show="form.autoRefresh.switchEnable && form.autoRefresh.actType === 'pull'"
      :label="$demoi18n('panelData.refreshInterval')"
      prop="refreshInterval"
    >
      <div class="refreshInterval">
        <Range
          v-model:value="form.autoRefresh.interval"
          :min="1"
          type="input"
        />
        <span class="unit">{{ $demoi18n('word.second') }}</span>
      </div>
    </VsFormItem>
  </div>
</template>
<script>
import Range from '@/components/common/range/range.vue';
import VsFormItem from '@/components/common/vs-form-item/vs-form-item.vue';
import AutoRefreshPushTypeSetting from '@/components/common/auto-refresh/auto-refresh-push-type-setting.vue';
import { CAN_AUTO_REFRESH_TYPE } from '@/utils/constant.js';

export default {
  components: { AutoRefreshPushTypeSetting, Range, VsFormItem },
  props: {
    form: Object,
    config: Object,
  },
  data() {
    return {};
  },
  computed: {
    isShow() {
      const { autoRefresh, dataSourceType } = this.form;
      return autoRefresh && CAN_AUTO_REFRESH_TYPE.includes(dataSourceType);
    },
  },
  watch: {
    'form.dataSourceType'() {
      this.initActType();
    },
  },
  methods: {
    initActType() {
      if (!this.form.autoRefresh) {
        return null;
      }
      let { actType } = this.form.autoRefresh;
      const canPull = this.can('pull');
      const canPush = this.can('push');
      if (canPull && !canPush) {
        actType = 'pull';
      } else if (!canPull && canPush) {
        actType = 'push';
      } else if (canPull && canPush && !actType) {
        actType = 'pull';
      } else {}
      this.form.autoRefresh.actType = actType;
      return null;
    },

    can(actType) {
      let flag = this.form.autoRefresh.actTypes.includes(actType);
      if (this.form.dataSourceType !== 'xMiner' && actType === 'push') { // push模式限制只用于xMiner
        // 限制值用于xminer
        flag = false;
      }
      return flag;
    },
  },
};
</script>
<style lang="less" scoped>
.auto-refresh-setting {
  margin-bottom: 10px;
  .refreshInterval {
    display: flex;
    .unit {
      margin: 0 5px;
      white-space: nowrap;
    }
  }
}
</style>
